import { CloseOutlined, SmileOutlined } from '@ant-design/icons'
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'
import {
  Avatar,
  Button,
  Divider,
  Drawer,
  Dropdown,
  Form,
  List,
  Skeleton,
  Tooltip,
} from 'antd'
import TextArea from 'antd/es/input/TextArea'
import dayjs from 'dayjs'
import React, { useRef, useState } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import styles from './index.module.scss'
interface Props {
  info: {
    userID: string | number
    articleID: string | number
  }
  open: boolean
  onClose: (
    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
  ) => void
}

const Desc = ({ info }: any) => {
  console.log(info)
  return (
    <div className={styles.root}>
      <div className="box">
        <div className="desc">{info.desc}</div>
        <div className="createTime">{info.createTime}</div>
      </div>
    </div>
  )
}

const Index = ({ info, open, onClose }: Props) => {
  const [comment, setComment] = useState('')
  const [textStatus, setTextStatus] = useState<boolean>(true)
  const [commentList, setCommentList] = useState<any[]>([
    {
      avatar:
        'https://img0.baidu.com/it/u=189729508,2250841752&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706288400&t=186fb6d89c795f6faec4a3ecdf9e1d9c',
      createTime: '2022-11-12 11:52:36',
      title: 'Ant Design Title 1',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img1.baidu.com/it/u=2837426444,1036569200&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706288400&t=474327ae6dbf8e418bb334b8df13249d',
      createTime: '2022-05-25 11:52:36',
      title: 'Ant Design Title 2',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=1284413808,930446668&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706288400&t=06221a10648ac4f8f91dd5c69dc5052b',
      createTime: '2022-09-26 11:52:36',
      title: 'Ant Design Title 3',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
    {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: '2012-11-12 11:52:36',
      title: 'Ant Design Title 4 ',
      desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
    },
  ])
  const [loading, setLoading] = useState(false)
  const commentRef = useRef<HTMLDivElement>(null)
  const onChange = (e: any) => {
		if (e.target.value  && textStatus)   setTextStatus(false)
    setComment(e.target.value)
  }
  const emojiSelect = (rest: any) => {
		if (rest && textStatus)   setTextStatus(false)
    setComment(comment + rest.native)
  }
  const handleIssue = () => {
    console.log(info, comment)
    const currComment = {
      avatar:
        'https://img2.baidu.com/it/u=2531060239,4136051273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=552',
      createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      title: 'Ant Design Title 4 ',
      desc: comment,
    }
    const list = [currComment, ...commentList]
    commentRef.current!.scrollTop = 0
    setCommentList(list)
		setTextStatus(true)
    setComment('')
  }
  const loadMoreData = () => {
    console.log('loadMoreData', loading)
    if (loading) {
      return
    }
    setLoading(true)
    setTimeout(() => {
      const list = []
      for (let i = 0; i < 8; i++) {
        list.push({
          avatar:
            'https://img0.baidu.com/it/u=189729508,2250841752&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706288400&t=186fb6d89c795f6faec4a3ecdf9e1d9c',
          createTime: '2022-11-12 11:52:36',
          title: 'Ant Design Title 1',
          desc: 'vudlfgvlv大测试大V规范v是大V科技开收据速度可如何都是VB开局绑定v木地板v进入过不等级考试VB十点半 卡独臂举报大撒把巨款路IG啊把控老实交代VB进啦快睡吧',
        })
      }
      setCommentList([...commentList, ...list])
      setLoading(false)
    }, 1000)
  }
  return (
    <>
      <Drawer
        className={styles.root}
        title="评论"
        onClose={onClose}
        open={open}
        width={700}
        closeIcon={null}
        extra={<CloseOutlined onClick={onClose} />}>
        <div className="comment">
          <Avatar
            size={50}
            src={
              'https://img1.baidu.com/it/u=2411597274,372131597&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
            }
          />
          <div className="input">
            <TextArea
              value={comment}
              showCount
              maxLength={1000}
              onChange={onChange}
              // onPressEnter={handleIssue}
              placeholder="请输入评论内容..."
              style={{ height: 150, resize: 'none', paddingBottom: '45px' }}
            />
            <div className="issue">
              <Dropdown
                placement="bottomLeft"
                dropdownRender={() => (
                  <Picker
                    data={data}
                    onEmojiSelect={(rest: any) => emojiSelect(rest)}
                  />
                )}
                trigger={['click']}>
                <Tooltip placement="top" title={'添加表情'}>
                  <SmileOutlined
                    style={{ fontSize: '26px', marginRight: '24px' }}
                  />
                </Tooltip>
              </Dropdown>
              <Button onClick={() => handleIssue()} disabled={textStatus}>发布评论</Button>
            </div>
          </div>
        </div>
        <div className="commentlist" id="commentlist" ref={commentRef}>
          <InfiniteScroll
            dataLength={commentList.length}
            next={loadMoreData}
            hasMore={commentList.length < 50}
            // scrollThreshold={0.5}
            loader={
              loading ? (
                <Skeleton avatar paragraph={{ rows: 1 }} active />
              ) : null
            }
            // loader={<h3>jiaziazhong.....</h3>}
            endMessage={<Divider plain>已经没有更多信息了... 🤐</Divider>}
            scrollableTarget="commentlist">
            <List
              itemLayout="horizontal"
              dataSource={commentList}
              renderItem={(item, index) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} />}
                    title={item.title}
                    description={<Desc info={item}></Desc>}
                  />
                </List.Item>
              )}
            />
          </InfiniteScroll>
        </div>
      </Drawer>
    </>
  )
}

export default Index
